<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: wjn
 * @LastEditTime: 2022-01-07 15:57:53
-->
<template>
  <div ref="bottom1_container" style="height:95%"></div>
</template>

<script>
//2.引入折线图构造函数
import {Column} from '@antv/g2plot'

export default {
    data() {
      return {
        dataArr:[
          {
            type: '家具家电',
            sales: 38,
          },
          {
            type: '粮油副食',
            sales: 52,
          },
          {
            type: '生鲜水果',
            sales: 61,
          },
          {
            type: '美容洗护',
            sales: 145,
          },
          {
            type: '母婴用品',
            sales: 48,
          },
          {
            type: '进口食品',
            sales: 38,
          },
          {
            type: '食品饮料',
            sales: 38,
          },
          {
            type: '家庭清洁',
            sales: 38,
          }
        ]
      }
    },
    created() { //钩子函数

    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        const colum = new Column(this.$refs.bottom1_container,{
          data:this.dataArr,
          xField: 'type',
          yField: 'sales',
          //悬浮框提示
          tooltip:{
            fields:['ratio','sales'],
            domStyles:{
              'g2-tooltip':{
                padding:'5px',
                backgroud:'rgba(47,6,170,0.8)',
                color:'#fff',
                fontSize:'16px'
              }
            }
          },
          //修改x轴文本
          xAxis:{
            label:{
              rotate:-45,
              offset:30,
            }
          }
        })
        colum.render();
      }
    }
}
</script>

<style scoped>

</style>